<template>
    <div class="prize">
        <!-- 标题区域 -->
        <div class="prize-title">湖南吉利汽车职业技术学院迎新抽奖</div>

        <!-- 抽奖主要区域 -->
        <div class="prize-number-main">
            <div class="prize-number-list">
                <div v-for="(item, index) in prizeNumber" :key="item" class="prize-nuber">{{ prizeNUmbers.length ?
                    prizeNUmbers[index] : '?' }}</div>
            </div>
        </div>

        <!-- 抽奖按钮 -->
        <div class="start-btn">
            <div :class="{ 'forbidden': status == 1 }" @click="showParamsDialog" class="btn">开始抽奖</div>
            <div :class="{ 'forbidden': status == 0 }" @click="pause" class="btn">暂停抽奖</div>
            <div v-if="prizeData.length > 0" @click="dialogVisible = true" class="btn">中奖记录</div>
            <div v-if="prizeData.length > 0" @click="cleanData" class="btn">清除记录</div>
        </div>

        <!-- 中奖信息展示 -->
        <el-dialog title="中奖记录" :visible.sync="dialogVisible" width="50%">
            <div v-for="(item, index) in prizeData" :key="index" class="bout-item">
                <div class="bout-title">第{{ index + 1 }}轮</div>
                <div class="bout-num-list">
                    <div v-for="(num, index) in item" :key="index" class="num">{{ num }}</div>
                </div>
            </div>
        </el-dialog>

        <!-- 参数设置 -->
        <el-dialog title="抽奖参数设置" :visible.sync="paramsDialogVisible" width="50%">
            <div class="params">
                <div class="params-title">中奖人数</div>
                <el-input type="number" v-model.number="prizeNumber" placeholder="请输入中奖人数"></el-input>
                <div class="params-title">学生人数</div>
                <el-input type="number" v-model.number="studentNum" placeholder="请输入学生人数"></el-input>
                <div class="start-btn">
                    <div @click="startPrize" class="btn">立即开始</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Prize',
    data() {
        return {
            // 学生人数
            studentNum: 5000,
            //抽奖个数
            prizeNumber: 10,
            //座位号
            seat: [],
            //记录随机生成的座位号,暂停后就是本轮中奖座位号
            prizeNUmbers: [],
            //中奖座位号记录(记录多轮,每一轮都会更换)
            winningSeats: [],
            //状态(用于记录抽奖状态,用于抽奖时候不能在重复点击抽奖限制等,0:暂停状态 1:抽奖中)
            status: 0,
            //对当前轮数
            num: 1,
            //定时器
            prizeInterval: null,
            //是否线上中奖记录
            dialogVisible: false,
            //中奖记录(用于中奖记录的数据显示)
            prizeData: [],
            //是否显示参数设置
            paramsDialogVisible: false
        }
    },
    created() {
        this.getSeatNumber()
        if (localStorage.getItem('prizeData')) {
            this.prizeData = JSON.parse(localStorage.getItem('prizeData'))
        }
        if (localStorage.getItem('studentNum')) {
            this.studentNum = parseInt(localStorage.getItem('studentNum'))
        }
    },
    methods: {
        //开始抽奖
        startPrize() {
            this.getSeatNumber()
            if (this.status == 1) return this.$message.error('本轮抽奖进行中!');
            if (!this.prizeNumber) return this.$message.warning('请输入抽奖个数并且抽奖个数必须大于0')
            if (this.prizeNumber > this.seat.length) return this.$message.error('未中奖座位数量小于抽奖个数');
            this.status = 1;        //修改状态为抽奖中
            this.paramsDialogVisible = false;

            localStorage.setItem('studentNum', this.studentNum)

            this.prizeInterval = setInterval(() => {
                //生成抽奖个数的各个位置随机数
                this.prizeNUmbers = [];
                //随机生成中奖座位(因为座位列表是数组，索引从0开始)
                this.getRandomInt(0, this.seat.length - 1)
            }, 40);
        },

        //随机生成中奖座位(不重复)
        getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            while (true) {
                this.prizeNUmbers.push(this.seat[Math.floor(Math.random() * (max - min + 1)) + min]);
                this.prizeNUmbers = [...new Set([...this.prizeNUmbers])]
                if (this.prizeNUmbers.length >= this.prizeNumber) {
                    return;
                }
            }
        },

        //暂停抽奖(上传中奖记录)
        pause() {
            if (this.status == 0) return this.$message.error('抽奖暂未进行!');
            if (this.prizeInterval) {
                clearInterval(this.prizeInterval);
                this.clearSeat();
                this.status = 0;        //修改状态为暂停状态
                this.saveData();
                this.num++;
            }
        },

        //清除已中奖的座位号
        clearSeat() {
            //保存中奖的座位号记录
            this.winningSeats = [...this.winningSeats, ...this.prizeNUmbers]
            this.getSeatNumber()
        },

        //生成座位号
        getSeatNumber() {
            this.seat = [];
            let currentSeat = 1;
            for (let i = 1; i <= this.studentNum; i++) {
                if (this.winningSeats.indexOf(currentSeat) == -1) {
                    this.seat.push(currentSeat);
                }
                ++currentSeat;
            }
        },

        //保存数据
        saveData() {
            this.prizeData.push(this.prizeNUmbers);
            localStorage.setItem('prizeData', JSON.stringify(this.prizeData));
        },

        //清除记录
        cleanData() {
            this.$confirm('此操作将永久清除本次抽奖记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.prizeData = [];
                localStorage.removeItem('prizeData');
                this.$message.success('记录已清除');
            }).catch(() => { });
        },

        //显示设置参数弹框
        showParamsDialog() {
            if (this.status == 1) return this.$message.error('本轮抽奖进行中!');
            this.paramsDialogVisible = true;
        }

    },

    watch: {
        prizeNumber(newVal, oldVal) {
            this.prizeNUmbers = []
        }
    }
}
</script>

<style lang="scss" scoped>
.prize {
    width: 100vw;
    height: 100vh;
    background-image: url("@/assets/image/bg.jpg");
    background-size: 100% 100%;

    // 标题区域
    .prize-title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 20%;
        font-size: 60px;
        letter-spacing: 15x;
        font-family: 'ZiHunJianQiShouShu';
        color: #fffe31;
    }

    // 抽奖主要区域
    .prize-number-main {
        display: flex;
        align-items: center;
        height: 70%;
        width: 90%;
        margin: 0 auto;
        overflow-y: auto;

        &::-webkit-scrollbar {
            width: 0;
        }

        .prize-number-list {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            flex-wrap: wrap;
            height: 100%;
            width: 100%;

            .prize-nuber {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 9%;
                height: 30%;
                background: rgba(0, 0, 0, .2);
                border-radius: 10px;
                color: #fffe31;
                font-size: 45px;
                font-weight: 900;
                margin-right: calc(10% / 9);
                margin-bottom: 2%;

                &:nth-child(10n) {
                    margin-right: 0;
                }
            }
        }
    }

    .start-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 10%;

        .btn {
            padding: 10px 30px;
            background: #fffe31;
            border-radius: 5px;
            color: red;
            cursor: pointer;
            margin: 0px 15px;
        }

        .forbidden {
            background: #ccc;
        }
    }

    // 中奖信息展示
    .bout-title {
        color: #fffe31;
        font-size: 20px;
        text-align: center;
        font-family: 'ZiHunJianQiShouShu';
    }

    .params-title {
        color: #fffe31;
        font-size: 20px;
        padding: 20px 0;
        font-family: 'ZiHunJianQiShouShu';
    }

    .bout-num-list {
        display: flex;
        flex-wrap: wrap;
        margin: 20px 0;
        justify-content: center;

        .num {
            color: #fffe31;
            margin: 10px;
        }
    }

    //参数设置
    .params {

        .start-btn {
            margin-top: 30px;
        }
    }

    //修改elementui样式
    &::v-deep .el-dialog {
        background-image: url('@/assets/image/diglog-bg.jpg');
        background-size: 100%;
        background-position: bottom;
        border-radius: 10px;
    }

    &::v-deep .el-dialog__title {
        color: #fffe31;
        display: block;
        text-align: center;
        font-size: 25px;
        font-family: 'ZiHunJianQiShouShu';
    }
}
</style>